
.app-quick-group {
  @include flex(center,space-around);

  width: $quick-group-width;
  height: $quick-group-height;
  padding: $quick-group-padding;
  font-size: $quick-group-font-size;
  color: $quick-group-color;
  .group-item {
    @include flex(center,center);

    position: relative;
    flex: 1;
    height: $quick-group-height;
    margin: 0 0 -0.02rem -0.02rem;
    background-color: $quick-group-background;
    border: 0.02rem solid $quick-group-border-color;
    &:first-child {
      border-top-left-radius: 0.1rem;
      border-bottom-left-radius: 0.1rem;
    }
    &:last-child {
      border-top-right-radius: 0.1rem;
      border-bottom-right-radius: 0.1rem;
    }
  }
  .group-item--active {
    color: $quick-group-active-color;
    background-color: $quick-group-active-background;
  }
}
.app-quick-group-popup {
  @include flex(flex-start,flex-start,column);

  position: absolute;
  right: 0;
  left: 0;
  z-index: 9999;
  width: $quick-group-width;
  max-height: 0;
  margin: $quick-group-popup-margin;
  overflow: hidden;
  overflow-y: auto;
  background-color: $quick-group-background;
  border: $quick-group-popup-border;
  border-bottom-right-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
  box-shadow: 0 0 0.2rem $quick-group-box-shadow;
  transition: max-height 0.3s ease-in;
  .group-popup-item {
    @include flex(center);

    width: 100%;
    padding: 0.2rem 0.4rem;
    font-size: $quick-group-font-size;
    color: $quick-group-color;
    border-bottom: 0.02rem solid $quick-group-border-color;
  }
  .group-popup-item--active {
    color: $quick-group-active-color;
    background-color: $quick-group-active-background;
  }
  &.app-quick-group-popup--open {
    max-height: 8rem;
  }
}
